<template>
  <div class="ChildPage TablePage" >
    <vb-page ref="page" @on-load="getList" @onTableSelection="doSelect">
      <template #headerSearch-append="scope">
        <span style="font-size: 12px; color: #666666">单号</span>
        <el-input v-model="billNo" clearable placeholder="请输入单号" style="margin-left: 5px;margin-right: 10px; width: 250px" size="small"></el-input>
        <span style="font-size: 12px; color: #666666">单据类型</span>
        <el-select v-model="billType" clearable placeholder="请选择单据类型" style="margin-left: 5px;margin-right: 10px; width: 250px" size="small">
          <el-option v-for="item in outStockBillTypeList" :key="item.key" :label="item.name" :value="item.key"></el-option>
        </el-select>
        <div>
          <span style="font-size: 12px; padding-right: 5px; color: #666666">物料</span>
          <el-select filterable remote :remote-method="e => getMaterialList(e)" v-model="materialNo" size="small" clearable class="material" placeholder="请输入物料编码或者名称" style="margin-right: 10px">
            <el-option v-for="item in materialList" :key="item.fNumber" :label="item.fNumber + '：' + item.fName + ' ' + item.fSpecification" :value="item.fNumber" />
          </el-select>
        </div>
        <div class="block">
          <span style="font-size: 12px; padding-right: 5px; color: #666666">日期选择</span>
          <el-date-picker
              v-model="createTime"
              type="datetimerange"
              range-separator="至"
              size="small"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <el-button @click="search" size="small" style="margin-left: 5px" type="primary">搜索</el-button>
      </template>
      <template #table-status="scope">
        <el-tag :type="scope.row.status === 'save'? 'info': 'success'">{{ scope.row.status === 'save'? '保存': '审核' }}</el-tag>
      </template>
      <template #table-stockNo="scope">
        {{ getStockName(scope.row.stockNo) }}
      </template>
      <template #table-handle-prepend="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="oneHandOutStock(scope.row.billNo, scope.row.stockNo)">出库</el-button>
      </template>
      <template #footerBtn="data">
        <el-button type="primary" @click="handOutStock" icon="el-icon-s-home" size="mini">选择行出库</el-button>
      </template>
    </vb-page>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      reloadMaterial: false,
      materialList: [],
      stockList: [],
      dataList: [],
      outStockBillTypeList: [],
      billNo: null,
      billType: null,
      materialNo: null,
      createTime: null,
      selection: null,
      selectionLength:0,
      selectCount:0
    }
  },
  async mounted() {
    await this.getBillNo()
  },
  methods: {
    doSelect(data) {
      this.selection = data
      this.selectionLength = this.selection.length;
      this.selectCount=0
      for (var i=0;i<this.selectionLength;i++){
        this.selectCount+=data[i].count
      }
      this.selectCount = parseFloat(this.selectCount).toFixed(2)
    },
    getStockName(val) {
      if (this.stockList && this.stockList.length > 0) {
        for(let i = 0; i < this.stockList.length; i++) {
          if (this.stockList[i].key === val) {
            return this.stockList[i].name;
          }
        }
      }
      return '';
    },
    async getMaterialList(val) {
      if (!val) {
        this.materialList = []
        return
      }
      this.materialLoading = true
      try {
        const res = await this.callApi('get_material_by_key', { key: val, pageSize: 20 })
        if (!res.res) return
        this.materialList = res.data
      } finally {
        this.materialLoading = false
      }
    },
    async getBillNo() {
      this.loading = true;
      try {
        let res = await this.$api.getChildDictionaryListByKeys({
          keys: ['outStockBillType', "stock"]
        });
        if (!res.res) return;
        this.outStockBillTypeList = res.outStockBillType;
        this.stockList = res.stock;
      } finally {
        this.loading = false;
      }
    },
    search() {
      this.$refs.page.data.reload()
    },

    /**
     * 查询数据列表信息
     * @param page
     * @param size
     * @param search 检索条件
     * @param done
     */
     async getList (page, size, search, done) {
      if (!this.billType) {
        done()
        return
      }
      try {
        let res = await this.callApi('get_all_out_stock_bill',
            {
              billNo: this.billNo,
              materialNo: this.materialNo,
              billType: this.billType,
              createTime: this.createTime,
              pageIndex: page,
              pageSize: size
            })
        done(res)
      } catch (e) {
        done()
      }
    },
    async oneHandOutStock(billNo) {
       let billNoList = []
      billNoList.push(billNo)
      await this.handOutStock(billNoList)
    },
    async handOutStock(billNoList) {
       if (billNoList.length === 0) {
         for(let i = 0; i < this.selection.length; i++) {
           billNoList.push(this.selection[i].billNo)
         }
       }
       this.loading = true;
       try {
         let res = await this.callApi('hand_out_stock',
             {
               billNoList: billNoList,
               billType: this.billType
             })
         if (!res.res) return
         ElMessage.success("出库成功")
       } finally {
         this.loading = true
       }
    }
  }
}
</script>

<style scoped>
</style>
